
<template>
  <div class="box">
    <div class="ant-page-header">
      <div class="ant-page-header-heading-left">
        <span
          class="ant-page-header-heading-title"
          title="资讯管理"
        >资讯管理
        </span>
        <span
          class="ant-page-header-heading-sub-title"
          title="用于一些党建宣传，社区知识等相关文章信息的编辑发布"
        >用于一些党建宣传，社区知识等相关文章信息的编辑发布</span>
      </div>
    </div>
    <!--筛选表单-->
    <div class="filter-form">
      <el-form
        ref="form"
        label-position="top"
        label-width="100px"
        :inline="true"
        size="small"
      >
        <el-form-item prop="title" label="文章标题">
          <el-input v-model="queryData.title" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="cate_id" label="分类名" label-width="100px">
          <select-cate v-model="queryData.cate_id" placeholder="请选择" style="width: 300px" />
        </el-form-item>
        <el-form-item prop="status" label="状态" label-width="100px">
          <el-select v-model="queryData.status" clearable placeholder="请选择">
            <el-option label="隐藏" value="0" />
            <el-option label="显示" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item prop="create_time" label="创建时间" label-width="100px">
          <el-date-picker
            v-model="queryData.create_time"
            style="width:200px"
            size="mini"
            type="daterange"
            start-placeholder="请选择"
            end-placeholder="请选择"
          />
        </el-form-item>
        <el-form-item class="filterBtn">
          <el-button size="middle" @click="onReset">重置</el-button>
          <el-button size="middle" type="primary" @click="onFilter">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 整个表单 -->
    <div class="form">
      <!-- 新增一行 -->
      <div class="ant-pro-table-list-toolbar">
        <div class="ant-pro-table-list-toolbar-container">
          <el-button
            type="primary"
            style="height: 38px"
            @click="dialogShow = true"
          >新增咨询</el-button>
          <i class="el-icon-refresh-right" />
          <i class="el-icon-upload2" />
          <i class="el-icon-setting" />
        </div>
      </div>
      <!-- 表单 -->
      <el-table
        :header-cell-style="{ background: '#fafafa', color: '#252525' }"
        :data="list"
        style="width: 100%"
      >
        <el-table-column prop="id" label="ID" width="100" />
        <el-table-column prop="title" label="文章标题" width="200" />
        <el-table-column prop="article_cate.catename" label="分类名" width="150" />
        <el-table-column
          prop="pic_url"
          label="图片内容"
          width="120"
        >
          <template slot-scope="{row}">
            <!-- {{ 'http://124.223.14.236:8881'+ row.pic_url }} -->
            <el-image
              :preview-src-list="['http://124.223.14.236:8881'+
                row.pic_url]"
              :src="'http://124.223.14.236:8881'+ row.pic_url"
              width="100px"
              alt=""
            /></template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            {{ scope.row.status === 1 ? '显示' : '隐藏' }}
          </template>
        </el-table-column>

        <el-table-column prop="create_time" label="创建时间" width="280">
          <template slot-scope="{row}">
            {{ new Date(row.create_time).toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template slot-scope="{row}">
            <el-button
              type="text"
              @click="editRow(row.id)"
            >编辑</el-button>
          &nbsp;&nbsp;
            <el-button
              type="text"
              @click="delRow(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="page">
        <el-pagination
          :current-page.sync="queryData.current"
          :page-sizes="[10, 20 , 30, 40]"
          :page-size="queryData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
          @size-change="sizeChange"
          @current-change="currentChange"
        />
      </div>
      <!-- 新增弹窗 -->
      <el-drawer
        :title="`${title}咨询`"
        :visible.sync="dialogShow"
        :with-header="true"
        size="50%"
        @close="onClose"
      >
        <el-form
          ref="form"
          label-position="top"
          class="drawerForm"
          label-width="150px"
          :inline="true"
          size="small"
          :model="formData"
          :rules="formRules"
        >
          <!-- 文章标题 和 文章分类 -->
          <el-row>
            <el-col :span="12">
              <el-form-item prop="title" label="文章标题">
                <el-input v-model="formData.title" placeholder="请输入" style="width: 300px" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label-width="150px" label="文章分类" prop="cate_id">
                <select-cate v-model="formData.cate_id" placeholder="请选择" style="width: 300px" />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 文章状态  文章封面 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label-width="150px" label="文章状态">
                <el-radio-group v-model="formData.status">
                  <el-radio :label="0">隐藏</el-radio>
                  <el-radio :label="1">显示</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="文章封面" label-width="150px">
                <upload-image v-model="formData.pic_url" />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 文章内容 富文本-->
          <el-form-item prop="content" label="文章内容" label-width="150px">
            <quill-editor v-model="formData.content" class="article" />
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="center">
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="dialogShow = false">取消</el-button>
        </el-row>
      </el-drawer>
    </div>
  </div>
</template>

<script>

import { quillEditor } from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { getarticleListApi, getarticleInfoApi, editarticleApi, addarticleApi, delarticleApi } from '@/api/bjd/article'
import UploadImage from './components/upload-image.vue'
import selectCate from './components/selectCate.vue'
export default {
  name: 'MailPage',
  components: {
    UploadImage,
    quillEditor,
    selectCate
  },
  data() {
    return {
      list: [],
      // 日期
      // timerList: [],
      queryData: {
        title: '',
        cate_id: '',
        status: '',
        create_time: '',
        current: 1,
        pageSize: 10
      },
      total: 0,
      dialogShow: false,
      // 弹出层
      formData: {
        title: '',
        cate_id: '',
        status: 1,
        pic_url: '',
        content: ''

      },
      formRules: {
        title: [{
          required: true,
          message: '请输入文章标题',
          trigger: 'blur'
        }],
        cate_id: [{ required: true, message: '请选择文章分类', trigger: 'change' }],

        content: [{
          required: true,
          message: '请输入文章内容',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改' : '添加'
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 渲染页面
    async initData() {
      const res = await getarticleListApi(this.queryData)
      console.log(res)
      this.list = res.data.rows
      this.total = res.data.count
    },
    // ================分页=======================
    // 每页数量切换
    sizeChange(val) {
      // console.log(val) // 最新的页码
      this.queryData.pageSize = val
      this.initData()
    },
    // 页码切换事件
    currentChange(val) {
      // console.log(val) // 最新的页面
      this.queryData.current = val
      this.initData()
    },
    // =================筛选========================
    // 提交功能
    onFilter() {
      /* this.queryData.create_time[0] = +new Date(this.timerList[0])
      this.queryData.create_time[1] = +new Date(this.timerList[1]) */
      if (this.queryData.create_time) {
        this.queryData.create_time = this.queryData.create_time.map(item => +new Date(item)).join(',')
      }
      // 页码变成1
      this.queryData.current = 1
      // 重新拉去数据
      this.initData()
    },
    // 重置功能
    onReset() {
      // 筛选条件重置
      this.queryData = {
        title: '',
        cate_id: '',
        status: '',
        create_time: '',
        current: 1,
        pageSize: 10
      }
      // 重新拉去数据
      this.initData()
    },
    // =============================================
    // 提交行为
    async onSubmit() {
      // 表单的校验
      await this.$refs.form.validate()
      // 加工处理表单数据(拷贝一份再加工)
      // 请求的发生
      this.formData.id
        ? await editarticleApi(this.formData)
        : await addarticleApi(this.formData)
      // 提示效果
      this.$message.success(this.formData.id ? '修改成功' : '添加成功')
      // 关闭弹框
      this.dialogShow = false
      // 列表更新
      this.initData()
    },
    // 弹框关闭
    onClose() {
      // 表单重置
      this.formData = {
        title: '',
        cate_id: '',
        status: 1,
        pic_url: '',
        content: ''
      }
      // 移除校验
      this.$refs.form.clearValidate()
    },
    // 修改回显
    async editRow(id) {
      const res = await getarticleInfoApi(id)
      // 赋给变量
      this.formData = res.data
      // t弹窗打开
      this.dialogShow = true
    },
    // 删
    async delRow(id) {
      this.$confirm('确认删除吗?', '提示').then(async() => {
        await delarticleApi(id)
        if (this.list.length === 1 && this.formData.page > 1) this.formData.page--
        this.$message.success('删除成功')
        this.initData()
      }).catch(() => {
        this.$message.info('已取消')
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.box {
  background-color: #fafbfc;
}
.ant-page-header {
  box-sizing: border-box;
  margin: 3% 4% 0;
  color: #000000d9;
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  font-feature-settings: "tnum", "tnum";
  position: relative;
  padding: 16px 24px;
}
.ant-page-header .ant-page-header-heading-left {
  display: flex;
  align-items: center;
  margin-block: 4px;
  margin-inline-end: 0;
  margin-inline-start: 0;
  overflow: hidden;
}
.ant-page-header .ant-page-header-heading-title {
  margin-inline-end: 12px;
  margin-block-end: 0;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ant-page-header.ant-page-header-heading-title {
  margin-inline-end: 12px;
  margin-block-end: 0;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ant-pro-table-list-toolbar {
  line-height: 1;
  float: right;
}
.ant-pro-table-list-toolbar-container {
  display: flex;
  justify-content: space-between;
  padding-block: 16px;
  padding-inline: 0;
}
i {
  margin: 9px 13px;
  font-size: 22px;
}
.form {
  margin: 0 5%;
  background-color: #fff;
  padding: 0 2%;
}
.filter-form {
  margin: 0 5% 1%;
  padding: 1% 1%;
  background-color: #fff;
}
.filterBtn {
  float: right;
  padding-top: 22px;
}
.drawerForm {
  padding:0 5%;
}
</style>

